<template>
    <div class="tranfer">
        <div class="content-div">
            <div class="load-bg">
                <div class="jump"></div>	
                <i></i><i></i><i></i><i></i><i></i>
            </div>
            <div v-show='isSuccess1' style="text-align:center;font-size: 18px;color: #fff;">
                <span>验证成功，</span>
                <span style="color: #00BFFF;font-size: 24px;">{{num}}</span>
                <span>秒后跳转</span>
            </div>
            <div v-show='isSuccess2' style="text-align:center;font-size: 18px;color: #fff;">
                <span>验证失败，点击</span>
                <a href="#" @click='returnPre'>返回上一页</a>
            </div>
        </div>
    </div>
</template>

<script>
    import encryption from '@/libs/encryption.js'
    import cookieUse from '@/libs/cookie.js'
    import {loginToken2,baseInfo} from '@/api/login.js'
    export default {
        data () {
            return {
                num:3,
                isSuccess1:false,
                isSuccess2:false,
                setinter:null,
            }
        },
        mounted () {
            let url = window.location.href;
            let getParams = url.split('?')[1]
            let obj = {}
            let val = getParams.split('=')
            let getStr = val[1]
            getStr = decodeURIComponent(getStr);
            obj.token = getStr
            this.login(obj)
        },
        created(){

        },
        
        methods: {
            // 免登录接口
            login(obj){
                loginToken2(JSON.stringify(obj))
                .then(res=>{
                      console.log(res)
                    if(res.data.code === 1){
                        let getData = res.data.data
                        this.isSuccess1 = true
                        sessionStorage.setItem('exper-token',getData.token)
                        sessionStorage.setItem('rm',true)
                        cookieUse.setCookie('exper-token',getData.token,168)
                        // this.setinter = setInterval(() => {
                        //     this.num--
                        //     if(this.num < 1){
                        //         clearInterval(this.setinter)
                        //         window.openTrain('/bexperiment/#/homer','_self')
                        //     }
                        // }, 1000);
                    }else{
                        this.$Message.error({
                            content:res.data.message,
                            duration:5,
                            closable: true,
                        })
                        this.isSuccess2 = true
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            // 返回上一页
            returnPre(){
                window.history.go(-1); //返回上一页
            },
        },
    }
</script>

<style scoped>
    .tranfer{
        width: 100%;
        height: 100%;
        background:rgb(8, 23, 90);
        display: flex;
        justify-content: center;
        align-items: center;
        -moz-box-shadow:0 0 15px rgb(8, 23, 90);
        box-shadow: 0 0 15px rgb(8, 23, 90);
    }
    .load-bg{
        position: relative; 
        width: 400px; 
        height: 200px; 
        line-height: 300px; 
        text-align: center;
    }
	.load-bg i{
        display: inline-block; 
        width: 18px; 
        height: 18px; 
        border-radius: 50%;
        border: 2px solid #94949c;
        margin: 0 12px;
        -webkit-animation: load 1.2s linear infinite;
    }
	.load-bg i:nth-child(1) {
		-webkit-animation-delay: .2s; 
	}
	.load-bg i:nth-child(2) {
		-webkit-animation-delay: .4s; 
	}
	.load-bg i:nth-child(3) {
		-webkit-animation-delay: .6s; 
	}
	.load-bg i:nth-child(4) {
		-webkit-animation-delay: .8s; 
	}
	.load-bg i:nth-child(5) {
		-webkit-animation-delay: 1s; 
	}
	@-webkit-keyframes load
	{
        from {
            background:none;
            border: 2px solid #94949c;
        }
        to {
            background:-webkit-linear-gradient(top,#626464,#eee); 
            border: 1px solid #626464;
        }
	}
	.jump{
        position: absolute;
        display: inline-block;
        top: 30%;
        width: 18px;
        height: 22px;
        border-radius: 50%;
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#626464), to(#eee));
        background:-webkit-linear-gradient(#626464, #eee);
        background:-moz-linear-gradient(#626464, #eee);
        background:-o-linear-gradient(#626464, #eee);
        background:linear-gradient(#626464, #eee); 
        -webkit-animation:jump 2s ease-in-out 0.5s infinite;
	}
	.jump:before{
		content: "";
		position: absolute;
		width: 30px;
		height: 2px;
		color: red;
	}
	@-webkit-keyframes jump{
        0%{
            height: 18px;
            -webkit-transform:translate(15px,30px);
        }
        12%{
            height: 18px;
            -webkit-transform:translate(28px,-30px);
        }
        24%{
            height: 18px;
            -webkit-transform:translate(53px,30px);
        }
        36%{
            height: 18px;
            -webkit-transform:translate(78px,-30px);
        }
        48%{
            height: 18px;
            -webkit-transform:translate(103px,30px);
        }
        60%{
            height: 18px;
            -webkit-transform:translate(125px,-30px);
        }
        72%{
            height: 18px;
            -webkit-transform:translate(150px,30px);
        }
        84%{
            height: 18px;
            -webkit-transform:translate(170px,-30px);
        }
        100%{
            height: 18px;
            -webkit-transform:translate(200px,30px);
        }
    }  
</style>

